<template>
  <div class="nav"><NavBar /></div>
  <div class="home-container">
    <div class="header">
      <h1 class="title">医学影像智能平台</h1>
      <p class="subtitle">AI驱动精准诊断 · 数据赋能临床决策</p>
    </div>

    <div class="function-grid">
      <router-link to="/upload" class="function-card upload-card">
        <div class="card-content">
          <van-icon name="photograph" class="card-icon" />
          <h3>影像分析</h3>
          <p>支持CT/MRI/X光多模态处理</p>
        </div>
      </router-link>

      <router-link to="/history" class="function-card history-card">
        <div class="card-content">
          <van-icon name="clock-o" class="card-icon" />
          <h3>病例追溯</h3>
          <p>全周期诊疗数据管理</p>
        </div>
      </router-link>
    </div>

    <div class="quick-action">
      <van-button
          round
          icon="question-o"
          class="help-button"
          @click="showHelp"
      >使用指南</van-button>
    </div>
  </div>
</template>

<script setup>
import { showDialog } from 'vant'
import NavBar from "@/components/NavBar.vue";

const showHelp = () => {
  showDialog({
    title: '快速指南',
    message: '1. 上传影像需DICOM/JPG格式\n2. 分析结果自动保存至病例库\n3. 支持多维度数据筛选',
    confirmButtonText: '知道了',
  })
}
</script>

<style scoped>
.home-container {
  margin-top: 4vh;

  width: 100vw;
  height: 90vh;
  padding: 40px 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #f0f4ff 100%);
}

.header {
  text-align: center;
  margin-bottom: 48px;
}

.title {
  font-size: 2.5rem;
  color: #1e40af;
  margin-bottom: 12px;
  font-weight: 600;
  letter-spacing: 1px;
}

.subtitle {
  font-size: 1.1rem;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.function-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.function-card {
  height: 37vh;

  background: #ffffff;
  border-radius: 24px;
  padding: 40px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(224, 242, 254, 0.5);
}

.function-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(30, 64, 175, 0.1);
}

.upload-card {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.history-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.card-icon {
  font-size: 3rem;
  color: #1e40af;
  padding: 16px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(30, 64, 175, 0.1);
}

.function-card h3 {
  font-size: 1.5rem;
  color: #1e293b;
  margin: 0;
}

.function-card p {
  color: #64748b;
  text-align: center;
  line-height: 1.6;
  margin: 0;
}

.quick-action {
  position: fixed;
  bottom: 32px;
  right: 32px;
}

.help-button {
  background: #1e40af;
  color: white;
  padding: 12px 24px;
  box-shadow: 0 4px 6px -1px rgba(30, 64, 175, 0.1);
}

@media (max-width: 768px) {
  .home-container {
    padding: 32px 16px;
  }

  .title {
    font-size: 2rem;
  }

  .function-grid {
    gap: 24px;
  }

  .function-card {
    padding: 32px;
  }

  .help-button {
    bottom: 16px;
    right: 16px;
  }
}
</style>